import React, { useState, useEffect } from 'react'
import styles from './PickerPull.module.scss'
import "./PickerPull.scss"
import { Input, Cell, Picker } from 'react-vant';
import { Play } from '@react-vant/icons'

export type shopColumnsProps = { chainShopId: number | null; shopId: number | null; shopName: string }
export interface ItemChange {
    (params: shopColumnsProps): void
}

interface PickerPullProps {
    shopColumns: shopColumnsProps[];
    getPickerValue?: ItemChange
}
const PickerPull: React.FC<PickerPullProps> = (props) => {
    const { shopColumns } = props
    const [pickerVal, setPickerVal] = useState<string>('');
    const handleChangePicker = (value: string, item: shopColumnsProps) => {
        setPickerVal(value || '')
        let itemVo = item ? item : { chainShopId: null, shopId: null, shopName: '' } as shopColumnsProps
        (props.getPickerValue as ItemChange)(itemVo)
    };
    return (
        <div>
            <Picker
                popup={{ round: true }}
                value={pickerVal}
                columns={shopColumns}
                columnsFieldNames={{ text: 'shopName' }}
                onConfirm={handleChangePicker} >
                {(val: any, _: any, actions: { open: () => void; }) => {
                    return (
                        <Cell>
                            <Input className={styles['picker-pull-input']} value={val || ''} onClick={() => actions.open()} placeholder="请选择门店" readOnly suffix={<Play rotate={90} color={'#666666'} />} />
                        </Cell>
                    )
                }}
            </Picker>
        </div>
    )
}

export default PickerPull